<template>
  <div class="rf-engraving-actions">
    <div class="rf-engraving-save" >
      <button class="button-super" id="button-block" @click="preserve">保存</button>
    </div>
    <div class="rf-engraving-cancel">
      <button class="as-buttonlink" @click="Cancel">取消</button>
    </div>
  </div>
</template>

<script>
import bus from '../../../../../../bus'
export default {
  data() {
    return {
      CurrentInput:'',
      thirdValue:false,
      CancelMessage:false,
      conserve:true,
      CangeChange:false
    }
  },
  created() {
    // 接收InputFrist传进来的数据
    const that =this
    bus.$on('CurrentInput',function(data){
      that.CurrentInput=data
    })
    // 接收HideFrist的数据
    bus.$on('CloseAll',function(data){
      if (data==false) {
        that.Cancel()
      }
    })
    // 接收InputFrist里面button
    bus.$on('CleanAll',function(data){
       if (data==false) {
         that.CurrentInput=''
       }
    })
    // 接收hidepage传递进来的数据
    bus.$on('CangeChange',function(data){
         that.CangeChange=data
    })
  },
  methods: {
    Cancel(){
      // 当点击了取消按钮清空输入框的值
      if (this.CangeChange==true) {
        bus.$emit('CancelMessage',this.CangeChange)
      }else{
        bus.$emit('CancelMessage',this.CancelMessage)
      }
    },
    // 点击之后保存数据，将数据展示在HideFrist里面
    preserve(){
      // 传递数据给ContextFrist
      if (this.CurrentInput.length>0) {
        this.conserve=true
        bus.$emit('preserve',this.conserve,this.CurrentInput)
      }else{
         this.conserve=false
         bus.$emit('preserve',this.conserve)
      }
      bus.$emit('preserveClose',true)
    }
  },
  watch:{
    CurrentInput(current,prev){
      var ButtonStyle =document.getElementById('button-block')
      if (current.length>14) {
        var ButtonStyle =document.getElementById('button-block')
        ButtonStyle.style.backgroundColor='#efefef'
        ButtonStyle.style.pointerEvents='none'
        this.thirdValue=false
      } 
      else {
       ButtonStyle.style.cssText=''
       ButtonStyle.style.backgroundColor='#0071e3'
       this.thirdValue=true
      }
    }
    
  }
};
</script>

<style lang="less" scoped>
.rf-engraving-actions {
  margin-top: 30px;
  width: 100%;
  height: 89px;
  padding: 0 163px;
  .rf-engraving-save {
    width: 490px;
    height: 56px;
    .rf-engraving-save:hover{
        background-color: #0071e3;
    }
    .button-super {
      padding: 18px 31px;
      width: 490px;
      height: 56px;
      border: none;
      background-color: #0071e3;
      border-radius: 12px;
      color: #fff;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
    }
    .button-block{
      padding: 18px 31px;
      width: 490px;
      height: 56px;
      border: none;
      border-radius: 12px;
      color: #fff;
      text-align: center;
      font-size: 16px;
      background-color: #efefef;
      pointer-events: none;
    }
    .button-super:hover{
        // position: absolute;        
        background-color: #4662d9;
    }
  }
  .rf-engraving-cancel {
      margin: 8px 0 8px 0;
    width: 490px;
    height: 25px;
    .as-buttonlink {
      background-color: #fff;
      background: transparent;
      border: 0;
      color: #06c;
      font-size: inherit;
      line-height: inherit;
      font-weight: inherit;
      letter-spacing: inherit;
      padding: 0;
      vertical-align: inherit;
      cursor: pointer;
      font-size: 16px;
    }
    .as-buttonlink:hover{
        color:black ;
    }
  }
}
</style>